<template>
	<view class="content">
		<u-navbar back-text="" slot="center" :autoBack="true" safeAreaInsetTop placeholder>
			<view slot="center" class="leftText">名片置顶</view>
		</u-navbar>
		<view class="center">
			<view class="mptop">
				<view>您的名片完善度<text>{{myCard.progress}}</text>%</view>
				<view>置顶后可前往个人中心-我的名片中继续完善</view>
			</view>		
			<view class="setTop">
				<view class="setTopTitle">选择置顶条件</view>
				<view>
					<u--form
						labelPosition="left"
						:model="model1"
						:rules="rules"
						ref="form1"
						:labelStyle="{'font-size':'28rpx'}"
					>
						<view class="xv-mingtop poser" @click="checkAddres">
							<view class="xv-left">选择置顶范围</view>
							<view class="xv-right dis-row">
								<view class="vm-form selevct" v-if="selectcity.length == 0">请选择</view>
								<view class="vm-form dis-row selevct" v-if="selectcity.length >0">
									<view v-for="(se,sc) in selectcity" :key="sc" class="dis-row smallbox">
									    <text>{{cutstr(se.name,4)}}</text><label><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/cc.png"></image></label>
									</view>
								</view>
								<view class="xm-ico"> <u-icon slot="right" name="arrow-right"></u-icon> </view>
							</view>
						</view>
						
						<!-- <u-form-item
							label="选择置顶位置"
							labelWidth="110"
							prop="userInfo.postion"
							@click="showPostion = true; hideKeyboard()"
							ref="item1"
							>
							<u-input
							v-model="sendPostData.topname" disabled disabledColor="#ffffff" 
							placeholder="请选择置顶位置" inputAlign="right" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item> -->
						
					<!-- 	<u-form-item label="选择置顶时间" labelWidth="110"  borderBottom 
						@click="showDate = true; hideKeyboard()" ref="item1">
							<view class="vm-form">{{sendPostData.toptimename?sendPostData.toptimename:'请选择时间'}}</view>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item> -->
						
						<view class="xv-mingtop poser" @click="showDate = true; hideKeyboard()">
							<view class="xv-left">选择置顶时间</view>
							<view class="xv-right dis-row">
								<view class="vm-form selevct">{{sendPostData.toptimename?sendPostData.toptimename:'请选择时间'}}</view>
								<view class="xm-ico"> <u-icon slot="right" name="arrow-right"></u-icon> </view>
							</view>
						</view>
						
					</u--form>
					
					<u-action-sheet
						:show="showDate"
						:actions="actions"
						title="请选择置顶时间"
						@close="showDate = false"
						@select="dateSelect"
					>
					</u-action-sheet>
					<u-action-sheet
						:show="showPostion"
						:actions="postionSelectList"
						title="请选择置顶位置"
						@close="showPostion = false"
						@select="postionSelect"
					>
					</u-action-sheet>
				</view>
				
			</view>
			<view class="pay">
			<!-- 	<view><text>到期</text>{{sendPostData.passtime}}</view>
				<view><text>消耗公分</text>{{sendPostData.gognfen}}</view> -->
				<view ><block><text>到期</text>{{sendPostData.passtime?sendPostData.passtime:'-'}}</block></view>
				<view ><block><text>消耗公分</text>{{sendPostData.gognfen?sendPostData.gognfen:0}}</block></view>
			</view>
			<view class="setTopRule">
				<view class="setTopRuleTitle">置顶规则</view>
				<u-parse :content="content"></u-parse>
				<view class="but" @click="sendnew">确定置顶</view>
			</view>
		</view>
		
		
		<pop ref="city" :direction="direction" :is_close="true" :is_mask="true" :width="100">
		     <view class="con-del dis-clm" v-if="cityList &&cityList.length>0">
				 <view class="cityName">选择地点</view>
				 <view class="checkgongzhongLList row-box" v-if="selectcity.length>0">
					<view v-for="(se,sc) in selectcity" :key="sc" class="dis-row" @click="delSelectgz(se,sc)">
						<text>{{se.name}}</text><label><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/cc.png"></image></label>
					</view>
				 </view>
				 <view class="cityList dis-row">
				 	<view class="sheng dis-clm">
				 		<scroll-view scroll-y="true">
				 			<view class="sheng-Lst" v-for="(cityitem,cityindex) in cityList" 
							:key="cityindex" 
							:class="{'shengActive':(si==cityindex && isclickCitysheng == true)}"
							v-if="cityitem.pid==0"
							@click="shengClick(cityitem,cityindex)"
							>{{cutstr(cityitem.name,10)}}</view>
				 		</scroll-view>
				 	</view>
				 	<view class="shi dis-clm" style="width: 400rpx;">
						<scroll-view scroll-y="true">
							<view class="shi-lst" v-for="(shiItem,shiIndex) in cityList[si].childone" 
							:key="shiIndex"
							:class="{'shiActive':(ci == shiIndex && isclickCityshi == true)}"
							@click="shiClick(shiItem,shiIndex)"
							style="width: 400rpx;"
							>
								{{shiItem.name}}
							</view>
						</scroll-view>
					</view>
				 	<!-- <view class="qu dis-clm">
						<scroll-view scroll-y="true">
							<view class="qu-lst" v-for="(quitem,quindex) in cityList[si].childone[ci].child" :key="quindex"
							:class="{'quActive':(qi==quindex && isclickCityqu == true)}"
							@click="quClick(quitem,quindex)">
								{{cutstr(quitem.name,10)}}
							</view>
						</scroll-view>
					</view> -->
				 </view>
				 
				 <view class="addres-footer dis-row">
					 <view class="addres-btn" @click="cleanAddresIndex">清除</view>
					 <view class="addres-btn" @click="getCheckAddress">确定选择</view>
				 </view>
			 </view>
		</pop>
	</view>
</template>
<script>
	import store from '@/common/store.js'
	import Index from '@/common/index-model.js'
	import pop from "@/components/ming-pop/ming-city.vue"
	let index=new Index();
	export default {
		data() {
			return {
				direction:'below',
				showDate: false,
				showPostion: false,
				model1: {
					userInfo: {
						range: 'uView UI',
						dates: '',
						postion: '',
					},
				},
				actions: [
					{
						name: '1天',
					},
					{
						name: '399天',
					},
				],
				postionSelectList: [
					{
						name: '首屏',value:1
					},
					{
						name: '其他',value:0
					},
				],
				content: "<p>1.置顶展示省或直辖市每天消耗50工分</p><p>2置顶展示市每天消耗10工分</p><p>3.最多同时置顶3个市或直辖市</p><p>4.如有任何疑问欢迎联系客服</p>",
				rules: {
					'userInfo.dates': {
						type: 'string',
						min: 1,
						required: true,
						message: '请选择置顶时间',
						trigger: ['blur', 'change']
					},
					'userInfo.postion': {
						type: 'string',
						min: 1,
						required: true,
						message: '请选择置顶位置',
						trigger: ['blur', 'change']
					}
				},
			radio: '',
			switchVal: false,
			orderid:'',
			cityList:[], //省市区 数据列表
			si:0, //省下标
			ci:0, //市下标
			qi:0, //区下标
			isclickCitysheng:false,//省是否被点击
			isclickCityshi:false,//市是否被点击
			isclickCityqu:false,//区是否被点击
			sendPostData:{
				cityids:'',//城市id
				cityname:'', //城市名称
				toptimeid:'', //置顶时间id
				toptimename:'', //置顶时间名称
				topindex:'',// 置顶位置
				topname:'',
				passtime:'',//到期时间
				gognfen:0, //消耗的公分
				orderid:''
			},
			selectcity:[],//选中的工种
			setTimeConfig:[],
			userinfo:{},
			myCard:{}
			};
		},
		components: {
			pop
		},
		onLoad(opt) {
			this.sendPostData.orderid = opt.id;
			this.getCityList();
			this.getTimeConfig();
			this.getCardDetail();
		},
		methods: {
			getCardDetail(){
				index.getPublicUserMember({},'/client/card/detail','get',res=>{
					if(res.data.code == 200 && res.data.success){
						let data=res.data.result;
						if(!data.avatar){
							data.avatar='http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/default-avatar.png';
						}
						this.myCard=data;
					}
				})
			},
			getUserInfo() {
				let url=""
			},
			getTimeConfig() {
				this.actions = []
				index.getPublicUserMember({},'client/public/find/top','get',res=>{
					if(res.data.code == 200 && res.data.success){
						this.setTimeConfig = res.data.result 
						if(this.setTimeConfig.length>0){
							for(let i=0;i<this.setTimeConfig.length;i++){
								this.actions.push({id:this.setTimeConfig[i].id,name:this.setTimeConfig[i].topTime+'天'})
							}
						}
					}
				})
			},
			//移除选中的地址
			delSelectgz(se,sc) {
				if(this.selectcity.length>0){
					this.selectcity.splice(sc,1)
					//delete this.selectCheckgognzhong[sc]
				}
			},
				//清除选中的地址
				cleanAddresIndex() {
					this.si = 0
					this.ci = 0
					this.qi = 0
					this.selectcity = []
					this.$refs.city.close()
				},
				//按地点查询
				getCheckAddress() {
					let ids=[]
					for(let i=0;i<this.selectcity.length;i++){
						ids.push(this.selectcity[i].id)
					}
					let send={
						topTime:this.sendPostData.toptimeid,
						orderId:this.sendPostData.orderid,
						city:ids.join(',')
					}
					if(this.sendPostData.toptimeid){
						this.getOutTime(send)
					}
					this.$refs.city.close();
				},
				//点击省切换
				shengClick(item,rv) {
					this.si = rv 
					this.ci = 0
					this.qi =0
					this.isclickCitysheng = true
					this.isclickCityshi = false 
					this.isclickCityqu = false
				},
				//点击市切换
				shiClick(item,cv) {
					this.isclickCityshi = true
					if(this.selectcity.length == 0){
						this.selectcity.push(item)
					}else{
						let issure = false
						for(let i=0;i<this.selectcity.length;i++){
							if(this.selectcity[i].id == item.id){
								issure=true
							}
						}
						if(issure == false){
							if(this.selectcity.length<3){
								this.selectcity.push(item)
								this.ci = cv
								this.qi = 0
							}else{
								index.show_tips('所选城市不能超过3个')
								return false
							}
							
						}
					}
				},
				quClick(item,qus) {
					this.qi = qus
					this.isclickCityqu = true
				},
				checkAddres() {
					//this.show = true
					if(uni.getStorageSync('token')){
						this.$refs.city.show()
					}else{
						index.navigate_to('/pagesC/login/login');
					}
				},
				dateSelect(e) {
					this.sendPostData.toptimeid = e.id
					this.sendPostData.toptimename = e.name
					let ids=[]
					for(let i=0;i<this.selectcity.length;i++){
						ids.push(this.selectcity[i].id)
					}
					let send={
						topTime:this.sendPostData.toptimeid,
						orderId:this.sendPostData.orderid,
						city:ids.join(',')
					}
					this.getOutTime(send)
					//this.$refs.form1.validateField('userInfo.dates')
				},
				//根据置顶时间查询公分过期时间
				getOutTime(send) {
					if(!send.topTime || !send.orderId || !send.city){
						return false;
					}
				    index.getPublicUserMember(send,'client/job/find/point','post',res=>{
						if(res.data.code == 200 && res.data.success){
							this.sendPostData.passtime = res.data.result.expireTime
							this.sendPostData.gognfen = res.data.result.workPoints
						}else{
							index.show_tips(res.data.message)
							return false	
						}
					})
				},
				//提交
				sendnew() {
					if(this.selectcity.length == 0){
						index.show_tips('请先选择城市')
						return false
					}
					let ids=[]
					for(let i=0;i<this.selectcity.length;i++){
						ids.push(this.selectcity[i].id)
					}
					let send={
						"cardId":this.sendPostData.orderid,
						"itemId":this.sendPostData.toptimeid,
						"showPos":this.sendPostData.topindex?this.sendPostData.topindex:1,
						"cityIds":ids.join(',')
					}
					// if(send.showPos == '' ||!send.showPos){
					// 	index.show_tips('请选择置顶位置1')
					// 	return false
					// }
					if(send.itemId == '' ||!send.itemId){
						index.show_tips('请选择置顶时间')
						return false
					}
					index.getPublicUserMember(send,'client/card/settop','post',res=>{
						if(res.data.code == 200 && res.data.success){
							index.show_tips('名片置顶成功')
							setTimeout(()=>{
								index.switch_tab('../../pages/index/index')
							},400)
						}else{
							index.show_tips(res.data.message)
							return false
						}
					})
				},
				postionSelect(e) {
					console.log(e);
					//this.model1.userInfo.postion = e.name
					this.sendPostData.topindex = e.value
					this.sendPostData.topname=e.name
					//this.$refs.form1.validateField('userInfo.postion')
				},
				hideKeyboard(){
					uni.onKeyboardHeightChange(res => {
					  console.log(res.height)
					})
				},
				//获取省市区数据列表
				getCityList() {
					index.getPublicUserMember({},'client/public/find/areaList','get',res=>{
						//console.log(res,'城市')
						if(res.data.code == 200 && res.data.success){
							let arr=res.data.result
							let provList = []
							if(arr.length>0){
								for(let i=0;i<arr.length;i++){
									if(arr[i].pid==0){
										provList.push(arr[i])
									}
								}
								if(provList.length>0){
									for(let i=0;i<provList.length;i++){
										provList[i].childone = []
										for(let j=0;j<arr.length;j++){
											//console.log(arr[j].id,'====arr[j].id ====')
											if(arr[j].pid == provList[i].id){
												provList[i].childone.push(arr[j])
											}
										}
									}
									//三级区
									for(let m=0;m<provList.length;m++){
										if(provList[m].childone.length>0){
											for(let n=0;n<provList[m].childone.length;n++){
												provList[m].childone[n].child=[]
												for(let k=0;k<arr.length;k++){
													if(arr[k].pid == provList[m].childone[n].id){
														provList[m].childone[n].child.push(arr[k])
													}
												}
											}
										}
									}
								}
								this.cityList = provList
								//console.log(this.cityList,'=====city====')
							}else{
								if(res.data.code == '401'){
									uni.removeStorageSync('')
								}
								arr=[]
							}
						}
					})
				},
				cutstr(str, len) {
					var str_length = 0;
					var str_len = 0;
					var str_cut = new String();
					str_len = str.length;
					for (var i = 0; i < str_len; i++) {
						var a = str.charAt(i);
						str_length++;
						if (escape(a).length > 4) {
							//中文字符的长度经编码之后大于4  
							str_length++;
						}
						str_cut = str_cut.concat(a);
						if (str_length >= len) {
							str_cut = str_cut.concat("...");
							return str_cut;
						}
					}
					//如果给定字符串小于指定长度，则返回源字符串；  
					if (str_length < len) {
						return str;
					}
				},
			}
	}
</script>

<style lang="scss" scoped>
@import url("index.css");
@import url("@/static/css/publics.css");
::v-deep {
  .u-navbar--fixed {	  
    // background-image: linear-gradient(to bottom, #42cdff, #0288ff);
    & > view {
      background: transparent !important;
    }
    .leftText {
      color: #000;
    }
  }
}
.u-form-item__body__left{ width: 200rpx!important;}
.content{
	height: 100vh;
}
.center{
	.mptop{
		background-image: url('http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/bg4.png');
		background-size: cover;
		height: 104rpx;
		color: #fff;
		padding: 26rpx;
		overflow: hidden;
		view:nth-child(1){
			margin-left: 196rpx;
			text{
				font-size: 36rpx;
				font-weight: bold;
				margin-left: 20rpx;
			}
		}
		view:nth-child(2){
			margin-left: 196rpx;
			font-size: 24rpx;
		}
	}
	.setTop{
		width: calc(100% - 80rpx);
		margin: 32rpx auto 0rpx auto;
		background: #fff;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 34rpx 20rpx;
		.setTopTitle{
			font-size: 36rpx;
			text-align: center;
			color: #424242;
		}
	}
	.pay{
		width: calc(100% - 80rpx);
		background: #fff;
		border-top: 2rpx dashed #F4F4F4;
		margin: 0rpx auto 0rpx auto;
		padding: 34rpx 20rpx;
		position: relative;
		font-size: 24rpx;
		display: flex;
		::before{
			content: '';
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			background: #F4F4F4;
			top: -15rpx;
			left: -15rpx;
			border-radius: 15rpx;
		}
		::after{
			content: '';
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			background: #F4F4F4;
			top: -15rpx;
			right: -15rpx;
			border-radius: 15rpx;
		}
		view:nth-child(1){
			font-size: 24rpx;
			color: #0F0F0F;
			line-height: 45rpx;
			flex: 1;
			text{
				color: #A1A1A1;
				margin-right: 8rpx;
			}
		}
		view:nth-child(2){
			font-size: 36rpx;
			color: #FF5964;
			line-height: 45rpx;
			font-weight: bold;
			text{
				font-size: 24rpx;
				color: #A1A1A1;
				margin-right: 8rpx;
				font-weight: 100;
			}
		}
	}
	.setTopRule{
		padding: 40rpx 20rpx;
		color: #A1A1A1;
		.setTopRuleTitle{
			color: #424242;
		}
		.but{ background: #0575FF; height: 80rpx; line-height: 80rpx; text-align: center; margin-top: 52rpx; color: #fff;}
	}
}

</style>